<template>
  <div class="login">
    <div class="wrap-banner">
      <vue-particles
        color="#ffffff"
        :particleOpacity="0.7"
        linesColor="#ffffff"
        :particlesNumber="80"
        shapeType="circle"
        :particleSize="5"
        :linesWidth="2"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="3"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
      >
      </vue-particles>

    </div>
    <div class="login-con">
      <Card icon="log-in" title="欢迎登录" :bordered="false">
        <div class="form-con">
          <login-form @on-success-valid="handleSubmit"></login-form>
          <p class="login-tip">
            <span class="registered">注册</span>
            <span class="forgot-password">忘记密码？</span>
          </p>
        </div>
      </Card>
    </div>
  </div>
</template>

<script>
  import LoginForm from '@/components/login-form'
  export default {
    name: 'login',
    methods: {
      handleSubmit ({userName, password}) {
        let url = '/api/sys/staff/login'
        let form = this.$qs.stringify({
          loginName: userName,
          password: password
        })
        this.$post(url, form).then((res) => {
          console.log(res)
          if (res.code === 0) {
            if (res.data.code === 20004) {
              this.$Message.error('登录名或密码错误')
              return false
            }
            localStorage.setItem('x-token', res.data.token)
            localStorage.setItem('isLogin', true)
            localStorage.setItem('role', res.data.routeUrl.substr(1))
            localStorage.setItem('staffName', res.data.staffName)
            localStorage.setItem('mobile', res.data.mobile)
            this.$router.push(res.data.routeUrl)
          } else {
            this.$Message.warning('用户名或密码错误')
          }
        })
      }
    },
    components: {
      LoginForm
    }
  }
</script>

<style scoped="scoped" lang="less">
  .login{
    width: 100%;
    height: 100%;
    background-image: url('../../../assets/images/login-bg.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
    &-con{
      position: absolute;
      right: 160px;
      top: 50%;
      transform: translateY(-60%);
      width: 300px;
      &-header{
        font-size: 16px;
        font-weight: 300;
        text-align: center;
        padding: 30px 0;
      }
      .form-con{
        padding: 10px 0 0;
      }
      .login-tip{
        font-size: 10px;
        color: #c3c3c3;
        overflow: hidden;
        .registered{
          float: left;
          padding: 0 10px;
        }
        .forgot-password{
          float: right;
          padding: 0 10px;
        }
      }
    }
  }
</style>
